<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>themes</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    
	<nav class="navbar navbar-expand-lg navbar-light bg-light bg-white p-5">
		<div class="container">
			<a class="navbar-brand" href="#">Themes</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
				<ul class="navbar-nav">
					<li class="nav-item active pl-2 pr-5">
					<li class="nav-item pl-2 pr-5">
						<a class="nav-link" href="#">Themes</a>
					</li>
					<li class="nav-item pl-2 pr-5">
						<a class="nav-link" href="#">About</a>
					</li>
					<li class="nav-item pl-2 pr-5">
						<a class="nav-link" href="#">FAQ</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
  
  
   <header>
<div class="card text-center">
  <div class="card-head">
    B
  </div>
  <div class="card-body">
    <h4 class="card-title">Themes</h4>
    <p class="card-text">Customizr and extend</p>
    <a href="#" class="btn btn-zi">Explore</a>
  </div>
</div>
   </header>
   <main>
       <div class="container">
           <div class="row">
               <div class="col-md-4">
                   <div class="card1">
          <div class="card-body">
           <img src="./img/%E6%90%9C%E7%8B%97%E6%88%AA%E5%9B%BE01.png" alt="...">
            <h5 class="card-title">Components and examples</h5>
            <p class="card-text">Each theme features new comonents</p>
          </div>
                   </div>
               </div>
               <div class="col-md-4">
                   <div class="card1">
          <div class="card-body img2">
           <img src="./img/%E6%90%9C%E7%8B%97%E6%88%AA%E5%9B%BE02.png" alt="...">
            <h5 class="card-title">Tons of variables</h5>
            <p class="card-text">Theme components inherit mush</p>
          </div>
                   </div>
               </div>
               <div class="col-md-4">
                   <div class="card1">
          <div class="card-body img2">
           <img src="./img/%E6%90%9C%E7%8B%97%E6%88%AA%E5%9B%BE03.png" alt="...">
            <h5 class="card-title">Source files and tools</h5>
            <p class="card-text">Each theme incudes components</p>
          </div>
                   </div>
               </div>
           </div>
           <h5>Team</h5>
           <div class="row">
               <div class="col-md-4">
                   <div class="card card3">
  <img src="./img/insta-2.jpg" class="card-img-top" alt="...">
  <div class="card-body card-r">
    <h5 class="card-title">Jacob Thornton</h5>
    <p class="card-text">Creator Bootstrap,engineer at Twitter & Medium. Founder of Bumpers</p>
    <a href="#" class="btn btn-zi">View GitHub</a>
    <div class="ding">
                          <img src="./img/avatar-fat.jpg" alt="">
                      </div>
  </div>
                      
                   </div>
               </div>
               <div class="col-md-4">
                   <div class="card card3">
  <img src="./img/insta-1.jpg" class="card-img-top" alt="...">
  <div class="card-body card-r">
    <h5 class="card-title">Mark Otto</h5>
    <p class="card-text">Design at GitHub Creator of Bootstrap.Previously at Twitter.Huge nerd</p>
    <a href="#" class="btn btn-zi">View GitHub</a>
    <div class="ding">
                      <img src="./img/avatar-mdo.jpg" alt="">
                  </div>
  </div>
                  
                   </div>
               </div>
               <div class="col-md-4">
                   <div class="card card3">
  <img src="./img/insta-3.jpg" class="card-img-top" alt="...">
  <div class="card-body card-r">
    <h5 class="card-title">Dave Gamache</h5>
    <p class="card-text">Design at Twitter & Medium.Starting something new soon;)</p>
    <a href="#" class="btn btn-zi">View GitHub</a>
    <div class="ding">
                      <img src="./img/avatar-dhg.png" alt="">
                  </div>
  </div>
                  
                   </div>
               </div>
           </div>
           
           <div class="nan">
               <div class="card">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-zi">Explore</a>
  </div>
</div>
           </div>
       </div>
   </main>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div>
                    <a href="">About</a>
                    <a href="">Terms</a>
                    <a href="">Privacy</a>
                    <a href="">Licenses</a>
                    <a href="">FAQ</a>
                    <a href="">Bootstrap</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/esm/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>